<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/function.js"></script>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/function.js"></script>

	<!-- 引入样式 -->
	<link rel="stylesheet" href="plugins/element-ui/element-ui.css">
	<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="scripts/request.js"></script>
	<style type="text/css">
	</style>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="images/logo.gif"/></div>
		<div class="help"><a href="shopping.html" class="shopping">购物车{{ this.shoppingCar.length }}件</a><a href="login.html">登录</a><a
				href="register.html">注册</a><a href="guestbook.html">留言</a><a href="manage/index.html">后台管理</a>
		</div>
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="#">首页</a></li>
				<li><a href="#">图书</a></li>
				<li><a href="#">百货</a></li>
				<li><a href="#">品牌</a></li>
				<li><a href="#">促销</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="wrap">
			<ul class="clearfix">
				<li class="first"><a href="#">音乐</a></li>
				<li><a href="#">影视</a></li>
				<li><a href="#">少儿</a></li>
				<li><a href="#">动漫</a></li>
				<li><a href="#">小说</a></li>
				<li><a href="#">外语</a></li>
				<li><a href="#">数码相机</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">秋冬靴</a></li>
				<li><a href="#">运动鞋</a></li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">家纺用品</a></li>
				<li><a href="#">婴幼奶粉</a></li>
				<li><a href="#">饰品</a></li>
				<li class="last"><a href="#">Investor Relations</a></li>
			</ul>
		</div>
	</div>
	<div id="position0" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt; 结账
	</div>
	<div id="main" class="wrap">
		<div class="lefter">
			<div class="box">
				<h2>商品分类</h2>
				<dl>
					<dt>图书音像</dt>
					<dd><a href="product-list.html">图书</a></dd>
					<dd><a href="product-list.html">音乐</a></dd>
					<dt>百货</dt>
					<dd><a href="product-list.html">运动健康</a></dd>
					<dd><a href="product-list.html">服装</a></dd>
					<dd><a href="product-list.html">家居</a></dd>
					<dd><a href="product-list.html">美妆</a></dd>
					<dd><a href="product-list.html">母婴</a></dd>
					<dd><a href="product-list.html">食品</a></dd>
					<dd><a href="product-list.html">手机数码</a></dd>
					<dd><a href="product-list.html">家具首饰</a></dd>
					<dd><a href="product-list.html">手表饰品</a></dd>
					<dd><a href="product-list.html">鞋包</a></dd>
					<dd><a href="product-list.html">家电</a></dd>
					<dd><a href="product-list.html">电脑办公</a></dd>
					<dd><a href="product-list.html">玩具文具</a></dd>
					<dd><a href="product-list.html">汽车用品</a></dd>
				</dl>
			</div>
		</div>
	</div>
	<div id="news" class="right-main">
		<h1>&nbsp;</h1>
		<div class="content" v-loading="loading">
			<form action="shopping-result.html">
				<div class="addressInfo">
					&nbsp&nbsp收货地址:
					<input type="text" v-model="userAddress.address"/>
					<button @click.prevent="addAddress">添加</button>
				</div>

				<div v-for="(item, index) in userAddressList"
					 :key="item.id">
					<input name="userAddress"
						   type="radio"
						   v-model="ordersDto.addressId"
						   :value="item.id"
						   id="span" style="margin: 5px 8px"
					/><span style="cursor: pointer" @click="handledClick(item.id)">{{ item.address }} <button @click.prevent="delAddress(item.id)">删除</button></span>
					<br/>
				</div>

				<div class="button"><input @click.prevent="checkout" style="margin-left: 8px" type="submit"
										   value="结账"/></div>
			</form>
		</div>
	</div>
	<div class="clear"></div>
	<div id="position1" class="wrap"></div>
	<div class="wrap">
		<div id="shopping"></div>
	</div>
	<div id="footer">
		Copyright &copy; 2010 项目组 All Rights Reserved. 京ICP证1000001号
	</div>
</div>
<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="api/user.js"></script>
<script type="text/javascript" src="api/parentCategories.js"></script>
<script type="text/javascript" src="api/product.js"></script>
<script type="text/javascript" src="api/common.js"></script>
<script type="text/javascript" src="api/userAddress.js"></script>
<script type="text/javascript" src="api/orders.js"></script>
<!-- 引入组件库 -->
<script type="text/javascript" src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	axios.get("/user/getStatus")
	// 检测URL参数
	let id = JSON.parse(localStorage.getItem("userInfo")).userId;
	const ordersDetailList = JSON.parse(sessionStorage.getItem("ordersDetailList"))

	const app = new Vue({
		el: '#app',
		data: {
			shoppingCar: [],
			loading: false,
			userAddress: {
				userId: id
			},
			userAddressList: [],
			ordersDto: {
				addressId: '',
				totalPrice: 0
			}
		},
		async mounted() {

			this.loading = true
			await this.getAddressList()
			this.ordersDto.addressId = this.userAddressList[0].id
			this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList"));

			this.loading = false
		},
		methods: {
			async getAddressList() {
				const resp = await getAddressListApi(id)
				this.userAddressList = resp.data
			},
			async addAddress() {
				this.loading = true
				const resp = await addAddressApi(this.userAddress)
				if (resp.code === 1) {
					this.$message({
						message: '添加成功',
						type: 'success'
					});
				}
				await this.getAddressList()
				this.loading = false
			},
			async delAddress(id) {
				this.loading = true
				if (confirm("是否确认删除?")) {
					const resp = await delAddressApi(id)
					if (resp.code === 1) {
						this.$message({
							message: '成功删除',
							type: 'success'
						});
					}
					await this.getAddressList()
				} else {
					this.$message({
						message: '已取消删除',
						type: 'success'
					});
				}
				this.loading = false
			},
			handledClick(id){
				this.ordersDto.addressId = id
			},
			async checkout() {
				ordersDetailList.forEach(product => {
					this.ordersDto.totalPrice += product.price;
				});
				this.ordersDto.ordersDetailList = ordersDetailList
				console.log(this.ordersDto)
				const resp = await addOrdersApi(this.ordersDto)
				if (resp.code === 1) {
					sessionStorage.removeItem("ordersDetailList");
					location.href='shopping-result.html'
					this.$message({
						message: '购买成功',
						type: 'success'
					});

				}else {
					this.$message.error('购买失败，请重新尝试');
				}
			}
		},

	})
</script>
</body>

</html>
